<template>
  <div class="app-container">
    <el-tabs v-model="firstTab" class="demo-tabs" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
        <keep-alive>
          <component :is="components[item.name]" v-if="item.name === activeName"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import Summary from "./components/Summary";
import Requirement from "./components/Requirement";
import Testcase from "./components/Testcase";
import Scripts from "./components/Scripts";
import Bug from "./components/Bug";
import Setting from "./components/Setting";

const firstTab = ref("summary");
const activeName = ref("summary");
const tabs = ref([
  {
    label: "概览",
    name: "summary",
  },
  {
    label: "需求",
    name: "requirement",
  },
  {
    label: "用例",
    name: "testcase",
  },
  {
    label: "脚本",
    name: "scripts",
  },
  {
    label: "缺陷",
    name: "bug",
  },
  {
    label: "设置",
    name: "setting",
  },
]);

// 组件映射
const components = {
  summary: Summary,
  requirement: Requirement,
  testcase: Testcase,
  scripts: Scripts,
  bug: Bug,
  setting: Setting,
};

function handleClick(tab, event) {
  activeName.value = tab.paneName;
}
</script>

<style>
.demo-tabs>.el-tabs__comp {
  color: #6b778c;
}
</style>
